<template>
  <div class="goods-card" @click="toExchange">
    <div class="img-box">
      <van-image
        class="goods-img"
        lazy-load
        :src="img">
            <template v-slot:error>加载失败</template>
      </van-image>
    </div>
    <div class="flex-box">
      <div class="goods-des">
        <div class="goods-name">{{name}}</div>
        <div class="goods-type">{{type}}</div>
        <div class="goods-volume">{{volume}}</div>
      </div>
      <div class="other">
        <div class="goods-points">{{points}}积分</div>
        <div class="price">￥{{price}}</div>
        <router-link class="exchange-btn" :to="urlmsg">兑换</router-link>
        <!-- <div class="exchange-btn">兑换</div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    img:{
      type:String,
      value:''
    },
    name:{
      type:String,
      value:''
    },
    points:{
      value:''
    },
    type:{
      type:String,
      value:''
    },
    volume:{
      type:String,
      value:''
    },
    urlmsg:{
      type:String,
      value:''
    },
    price:{
      type:Number,
      value:''
    },
    setup(props) {
      console.log('price',price)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.goods-card{
  width:100%;
  font-size: 27px;
}

.goods-card .img-box{
  width:100%;
  height: 400px;
  border:1px solid #e6e6e6;
  overflow: hidden;
}

.goods-card .goods-img{
  display: block;
  width:100%;
  max-height:100%;
  object-fit: scale-down;
}

.goods-card .flex-box{
  display: flex;
  margin-top: 20px;
}

.goods-card .goods-type{
  margin:10px 0;
}

.goods-card .goods-type,
.goods-card .goods-volume{
  color:#9c9c9c;
}

.goods-card .goods-des{
  width:70%;
}

.goods-card .other{
  flex:1;
  display: flex;
  flex-direction: column;
 justify-content: space-between;
}

.goods-card .goods-points{
  color:#00b034;
}

.goods-card .price{
  text-decoration: line-through;
  color:#9c9c9c;
}

.goods-card .exchange-btn{
  padding:5px;
  border-radius: 5px;
  color:#ffffff;
  text-align: center;
  background-color: #31b573;
}
</style>
